<template>
  <div class="songstwo">
    <div class="songslist" v-if="getsongslist.artist != undefined">
      <div class="songsimg" >
        <img :src="`${getsongslist.artist.cover}?param=285y165`" alt="" />
      </div>
      <div class="songsdetail" >
        <div class="songsname">
          <span>歌手</span> {{ getsongslist.artist.name }}
        </div>
        <div class="songslist1">
          <i>单曲数:</i> {{ getsongslist.artist.musicSize }}
        </div>
        <div class="songslist1">
          <i>MV数:</i> {{ getsongslist.artist.mvSize }}
        </div>
        <div class="songslist1">
          <i>专辑数:</i> {{ getsongslist.artist.albumSize }}
        </div>
        <div class="songslist1" style="width: 900px; height: 60px">
          <span> <i>简介:</i>{{ getsongslist.artist.briefDesc }}</span>
        </div>
      </div>
    </div>
    <div class="listlie">
      <span
        v-for="(m, index) in sod"
        :key="index"
        @click="godsq(m)"
        :class="{ active: m == ods }"
        >{{ m }}</span
      >
    </div>
    <div class="lsitdetsil" v-show="ods == '专辑'" style="height: 700px">
      <div class="songsalbum">
        <div class="zhuanji" v-for="m in getzhuanji" :key="m.id">
          <img :src="`${m.blurPicUrl}?param=160y140`" alt="" />
          <i class="albumname">{{ m.name }}</i>
          <i>{{ m.publishTime | dateFormtt }}</i>
        </div>
      </div>
      <div class="fenye" v-if="getsongslist.artist != undefined">
        <frpage
          :total="getsongslist.artist.albumSize"
          :numbers="14"
          :offset="offset"
          :continues="5"
          @substr="substr"
          @add="add"
          @numarrive="numarrive"
        />
      </div>
    </div>
    <div class="lsitdetsil2" v-show="ods == 'MV'">
      <div class="songsmv">
        <div class="new_box" v-for="(m, index) in getsongsmv" :key="m.id">
          <i
            class="iconfont icon-bofang"
            v-show="lod !== m.id"
            @click="geturl(m.id, index)"
          ></i>
          <img
            :src="`${m.imgurl16v9}?param=198y110`"
            alt=""
            v-show="lod !== m.id"
          />
          <video
            :src="getmvurl"
            ref="video"
            controls
            v-show="lod == m.id"
          ></video>
          <div class="mv_name">{{ m.name }}</div>
          <div class="mv_artistName">{{ m.artistName }}</div>
        </div>
      </div>
      <div class="fenye" v-if="getsongslist.artist != undefined">
        <frpage
          :total="getsongslist.artist.mvSize"
          :numbers="14"
          :offset="offsets"
          :continues="5"
          @substr="substr"
          @add="add"
          @numarrive="numarrive"
        />
      </div>
    </div>
    <div class="lsitdetsil3" v-show="ods == '歌手详情'">
      <div class="songsdsc" v-if="getsongslist.artist != undefined">
        <div class="dsc_left"></div>
        {{ getsongslist.artist.name }}简介
      </div>
      <p class="briefDesc">&emsp;&emsp;{{ getsongsdsc.briefDesc }}</p>
      <div
        class="introduction"
        v-for="m in getsongsdsc.introduction"
        :key="m.ti"
      >
        <div class="ti">{{ m.ti }}</div>
        <div class="txt">{{ m.txt }}</div>
      </div>
      <div class="height"></div>
    </div>

    <div class="lsitdetsil4" v-show="ods == '相似歌手'">
      <div class="likesongs" v-for="m in getlikesongs" :key="m.id">
        <img
          :src="`${m.img1v1Url}?param=170y150`"
          alt=""
          @click="gosongstwo(m.id)"
        />
        <i @click="gosongstwo(m.id)">{{ m.name }}</i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import fypage from "../../components/commons/fypage.vue";
export default {
  components: { fypage },
  data() {
    return {
      sod: ["专辑", "MV", "歌手详情", "相似歌手"],
      ods: "专辑",
      offset: 1,
      offsets: 1,
      lod: "",
      indexs: "",
    };
  },
  watch:{
    $route:{
      handler:function(){
        this.loadago()
      },
      deep:true
    }
    
  },
  methods: {
    godsq(m) {
      //console.log(m);
      //m.style.color='red'

      this.ods = m;
    },
    substr() {
      if (this.ods == "专辑") {
        this.offset--;
        this.$store.dispatch("getzhuanji", {
          m: this.$route.params.id,
          mi: (this.offset - 1) * 14,
        });
      } else {
        this.offsets--;
        this.$store.dispatch("getsongsmv", {
          m: this.$route.params.id,
          mi: (this.offsets - 1) * 14,
        });
      }
    },
    add() {
      if (this.ods == "专辑") {
        this.offset++;
        this.$store.dispatch("getzhuanji", {
          m: this.$route.params.id,
          mi: (this.offset - 1) * 14,
        });
      } else {
        this.offsets--;
        this.$store.dispatch("getsongsmv", {
          m: this.$route.params.id,
          mi: (this.offsets - 1) * 14,
        });
      }
    },
    numarrive(m) {
      if (this.ods == "专辑") {
        this.offset = m;
        this.$store.dispatch("getzhuanji", {
          m: this.$route.params.id,
          mi: (this.offset - 1) * 14,
        });
      } else {
        this.offsets = m;
        this.$store.dispatch("getsongsmv", {
          m: this.$route.params.id,
          mi: (this.offsets - 1) * 14,
        });
      }
    },
    geturl(m, mi) {
      this.$store.dispatch("getmedio", m);
      this.lod = m;
      // console.log(this.$refs);
      //console.log(this.$refs);
      if (this.indexs == "") {
        this.$refs.video[mi].catch((err) => {});
        this.indexs = mi;
      } else {
        this.$refs.video[indexs].pause();
        this.$refs.video[mi].play().catch((err) => {});
        this.indexs = mi;
      }
    },
    gosongstwo(m){
      //console.log(m);
     this.$router.push({name:'songstwo',params:{id:m}})
     
    },
    loadago(){
        this.$store.dispatch("getsongslist", this.$route.params.id);
    this.$store.dispatch("getzhuanji", { m: this.$route.params.id, mi: 0 });
    this.$store.dispatch("getsongsmv", { m: this.$route.params.id, mi: 0 });
    this.$store.dispatch("getsongsdsc", this.$route.params.id);
    this.$store.dispatch("getlikesongs", this.$route.params.id);
    }
  },
  mounted() {
    //console.log(this.$route.params.id);
    this.loadago()
  },
  computed: {
    ...mapState({
      getsongslist: (state) => {
        return state.second.getsongslist ;
      },
      getzhuanji: (state) => {
        return state.second.getzhuanji || [];
      },
      getsongsmv: (state) => {
        return state.second.getsongsmv || [];
      },
      getmvurl: (state) => {
        return state.user.mvurl;
      },
      getsongsdsc: (state) => {
        return state.second.getsongsdsc;
      },
      getlikesongs: (state) => {
        return state.second.getlikesongs;
      },
    }),
  },
};
</script>

<style lang='less' scoped>
.songstwo {
  margin: 20px 50px;
  margin-right: 20px;

  .songslist {
    width: 100%;
    height: 200px;
    .songsimg {
      float: left;
      width: 265px;
      height: 185px;

      margin-right: 40px;
      img {
        width: 265px;
        height: 185px;
      }
    }
    .songsdetail {
      float: left;
      width: 1100px;
      height: 215px;
      .songsname {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        span {
          display: inline-block;
          border: 1px solid #bf4f55;
          font-size: 18px;
          color: #bf4f55;
          font-weight: bold;
          padding: 5px 15px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
      .songslist1 {
        margin-bottom: 10px;
        font-size: 14px;

        span {
          font-size: 16px;
          i {
            font-size: 16px;
            color: #8bcbe0;
            margin-right: 8px;
          }
          overflow: hidden;

          text-overflow: ellipsis;

          display: -webkit-box;

          -webkit-line-clamp: 2;

          -webkit-box-orient: vertical;
        }

        i {
          font-size: 16px;
          color: #8bcbe0;
          margin-right: 8px;
        }
      }
    }
  }
  .listlie {
    float: left;
    width: 100%;
    height: 60px;
    span {
      display: inline-block;
      font-size: 18px;
      width: 130px;
      margin-left: 70px;
      text-align: center;
      padding-bottom: 20px;
      cursor: pointer;
      &.active {
        color: skyblue;
        border-bottom: 2px solid skyblue;
      }
    }
    span:hover {
      color: skyblue;
      border-bottom: 2px solid skyblue;
    }
  }
  .lsitdetsil {
    float: left;
    width: 100%;
    height: 800px;
    .songsalbum {
      float: left;
      width: 100%;
      height: 430px;
      .zhuanji {
        float: left;
        width: 160px;
        height: 180px;

        margin-right: 40px;
        margin-bottom: 40px;
        img {
          width: 160px;
          height: 140px;
          border: 1px solid black;
        }
        i {
          display: block;
          margin-bottom: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .albumname:hover {
          color: skyblue;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .fenye {
      float: right;
    }
  }
  .lsitdetsil2 {
    float: left;
    width: 100%;
    height: 800px;
    .fenye {
      float: right;
    }
    .songsmv {
      float: left;
      width: 100%;
      height: 350px;
      .new_box {
        position: relative;
        float: left;
        width: 198px;
        height: 110px;

        margin-top: 10px;
        margin-right: 30px;
        padding-bottom: 50px;

        video {
          cursor: pointer;
          width: 196px;
          height: 110px;
          border: 1px solid black;
        }
        img {
          cursor: pointer;
          width: 198px;
          height: 110px;
          border: 1px solid black;
        }
        .iconfont {
          position: absolute;
          top: 30px;
          right: 75px;
          font-size: 40px;
          z-index: 2;
          color: #fff;
          opacity: 0.6;
        }
        .iconfont:hover {
          opacity: 1.5;
          cursor: pointer;
        }
        .mv_name {
          cursor: pointer;
          font-size: 13px;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .mv_name:hover {
          color: cadetblue;
        }
        .mv_artistName {
          cursor: pointer;
          font-size: 16px;
          color: gray;
        }
        .mv_artistName:hover {
          text-decoration: underline;
        }
      }
    }
  }
  .lsitdetsil3 {
    float: left;
    width: 100%;
    height: 800px;

    .songsdsc {
      float: left;
      line-height: 40px;
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      .dsc_left {
        float: left;
        width: 5px;
        height: 20px;
        background-color: red;
        margin-top: 10px;
        margin-right: 10px;
      }
    }
    .briefDesc {
      float: left;
      line-height: 20px;
    }
    .introduction {
      float: left;

      .ti {
        float: left;
        margin-top: 20px;
        font-size: 18px;
        font-weight: bold;
      }
      .txt {
        float: left;
        width: 1470px;
        margin-top: 5px;
        line-height: 20px;
        white-space: pre-line;
      }
    }
    .height {
      float: left;
      width: 100%;
      height: 150px;
    }
  }
  .lsitdetsil4 {
    float: left;
    width: 100%;
    height: 800px;

    .likesongs {
      float: left;
      width: 170px;
      height: 170px;
      margin-right: 30px;
      margin-bottom: 10px;
      img {
        cursor: pointer;
      }
      i:hover {
        color: skyblue;
        cursor: pointer;
        text-decoration: underline;
      }
    }
  }
}
</style>